<template>
    <div class="hello" style="height: 100vh;background:#fff;">
      <app-head :title="title"></app-head>

      <div >
        <p class="title">你还可以输入{{maxLen-content.length}} 字
          <router-link :to="{path:'/solicitPush4', query:{title:this.$route.query.title}}"><button class="btn" @click="push">提交</button> </router-link>
        </p>
        <div class="send_con">
          <p class="tit"><input type="text" placeholder="标题" v-model="articleTitle"></p>
          <p class="con">

            <textarea @paste="aler_show" style="height: 120px;" name="" id="text_ar"  placeholder="正文" v-model="content" maxlength="500">

            </textarea>
          <div id="imgesDiv">
            <img v-for="item in imgs" :src='item' alt="">
          </div>
          </p>
        </div>
        <div>
          <p class="art">
            <span @click="up" class="uoloadimg" >

            </span>
            <span style="margin-left: 10px;">草稿已于{{nowTime}} 保存</span>
            <button class="btn" @click="is_maskFn">保存草稿</button>
          </p>
        </div>
      </div>
      <input v-if="ishowFile" ref="upload" id="buslicence_elc" @change="updateFile" name="buslicence_elc" class="js_upFile" type="file" style="display:none;">
      <div class="mask2" v-if="is_mask2">
        正在上传中
      </div>
      <div class="mask2" v-if="is_mask3">
        上传成功
      </div>
    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
        name: "SolicitPush2",
        created:function(){

        },
      mounted:function () {
              var that =this
        that.getData()
        setInterval(function () {
          that.getData()
        },60000)
      },
        components:{
          AppHead
        },
        data () {
          return {
            title: '征稿 | 活动标题',
            articleTitle:'',
            content:'',
            maxLen:2000,
            fileImg: '',
            tip: '',
            is_mask: false,
            is_mask2: false,
            is_mask3: false,
            imgs:[],
            ishowFile:true,
            nowTime:''
          }
        },
      methods:{
          aler_show:function () {
            this.content = " "

            document.getElementById('text_ar').value=" "

            this.$layer.alert("粘贴的内容已清除文字格式及图片 请重新上传图片！",{
              shade:true,
              btn: '确定',
              shadeClose: true,//点击遮罩是否关闭

            });
            setTimeout(function () {

              document.getElementById('text_ar').value=" "
            },800)

          },
        getData(){
          var date = new Date();
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
          }
          this.nowTime=date.getFullYear() + "-" + month + "-" + strDate
            + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()

        },
        up(){

          this.$refs.upload.click()
          // this.ishowFile = false
        },
        push:function () {
          console.log(this.text)
          var that =this
          var params= new FormData()
          params.append("content",this.content)
          params.append("articleTitle",this.articleTitle)
          params.append("id",this.$route.query.id)

          //模拟数据发布之后的效果，正式上线需要注释  139-147行


          //  投稿发布
          that.$http({
            method: 'post',
            url: '/article/sendSolicit',
            data:params
          }).then(function (res) {
            if(res.status==200){

            }
          }).catch(function (error) {

          })
        },

        getObjectURL: function (file) {
          var url = null
          if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file)
          } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file)
          } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file)
          }
          return url;
        },

        updateFile:function (e) {

          var that = this
          console.log(e.target.files)
          let file = e.target.files[0]

          console.log(this.getObjectURL(e.target.files[0]))

          let param = new FormData() // 创建form对象

          that.is_mask2 = true
          that.ishowFile = false
          setTimeout(function () {
            that.is_mask2=false
            that.imgs.push(that.getObjectURL(e.target.files[0]))
            that.ishowFile = true
          },1000)

          param.append('image', file, file.name)// 通过append向form对象添加数据
          console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
          // let config = {
          //   headers: {'Content-Type': 'multipart/form-data'}
          // } // 添加请求头
          // axios.post('/image/uploadImage', param, config)
          //   .then(function (res) {
          //     console.log(res.data.data)
          //     that.fileImg = res.data.data
          //   })

        },
        is_maskFn:function () {
            var that =this
            this.is_mask3 =true
            setTimeout(function () {
              that.is_mask3=false

            },1000)
          // document.getElementById('buslicence_elc').onchange =this.updateFile()
        }
      }
    }
</script>

<style scoped lang="less">

  .content{

    padding-bottom: 30px;
    background: #fff;
  }
  .title{
    color: #777777;
    font-size: 13px;
    height: 52px;
    line-height: 52px;
    background: #f2f3f6;
    text-align: left;
    padding: 0 16px;
    position: relative;
    .btn{
      width:80px;
      height:33px;
      background:rgba(74,144,226,1);
      border-radius:8px;
      background: #4A90E2;
      color: #fff;position: absolute;
      right: 16px;
      border: none;
      top: 10px;
    }
  }
  .uoloadimg{
    background: #fff url("../assets/images/icon3.png") no-repeat 100% center ;
    display: inline-block;
    width: 24px;
    height: 24px;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  .art{
    color: #777777;
    font-size: 12px;
    height: 52px;
    line-height: 52px;

    text-align: left;
    padding: 0 16px;
    position: relative;
    padding-left: 5%;
    span{
      display: inline-block;
      vertical-align: middle;
      input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
      }
    }
    .btn{

      width:80px;
      height:33px;

      border-radius:8px;
      background: #E24A4A;
      color: #fff;position: absolute;
      right: 16px;
      border: none;
      top: 10px;
    }
  }
.send_con{
  padding: 16px 24px;
  text-align: left;
  input,textarea{
    border: none;
    opacity: .7;
    outline: none;
    width: 100%;
    color: #ccc;font-size: 15px;
  }
  .tit{
      margin-bottom: 16px;
      border-bottom: 1px solid #eee;padding-bottom: 16px;
  }
  .con{
      textarea{
        outline: none;
        width: 100%;
      }
  }
}
</style>
<style lang="less">
  html{
    .vl-notify.vl-notify-alert h2.vl-notice-title{
      display: none!important;
    }
    .vl-notify .vl-notify-btns{
      padding: 0;
    }
    .vl-notify.vl-notify-main{
      box-shadow:none;
      border-radius:8px;
      width: 75%;
    }
    .vl-notify .vl-notify-content{
      font-size: 15px;
      color: #333333;
      text-align: center;line-height:26px;
    }
    .vl-notify-mask{
      background: rgba(0,0,0,.5);
      opacity: 1;
    }
    .vl-notify-btns{
      width: 100%;
      height: 48px;
      line-height: 48px;
      border-top: 1px solid rgba(238,238,238,1);;
      .notify-btn-primary{
        height: 48px;
        background: #fff;
        text-align: center;color: #0076FF;
        border: none;
        width: 100%;
        margin: 0 auto;font-size:17px;
      }
    }

  }
  .mask2 {
    position: fixed;

    top: 50%;
    width: 229px;
    height: 63px;
    background: rgba(0, 0, 0, 1);
    border-radius: 2px 0px 0px 2px;
    opacity: 0.5;
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 63px;
    left: 50%;
    margin-left: -115px;
  }
</style>
